<template>
    <LottieAnimation :animation-data="ChillPeopleJSON" class="anim1" :auto-play="true" :loop="true" :speed="1" ref="anim" />
    <LottieAnimation :animation-data="R1JSON" class="anim r1" :auto-play="true" :loop="true" :speed="0.05" ref="anim" />
    <LottieAnimation :animation-data="R2JSON" class="anim r2" :auto-play="true" :loop="true" :speed="0.02" ref="anim" />
    <LottieAnimation :animation-data="R3JSON" class="anim r3" :auto-play="true" :loop="true" :speed="0.05" ref="anim" />
</template>
<script setup lang="ts">
 import { watch, ref, onMounted, markRaw } from 'vue';
 import { LottieAnimation } from "lottie-web-vue";
 import ChillPeopleJSON from "@/assets/peopleChillChecking.json";

 import R1JSON from "@/assets/ShapesLoader.json";
 import R2JSON from "@/assets/ShapesLoader1.json";
 import R3JSON from "@/assets/CircularLoader.json";
 import {Tween, Easing} from '@tweenjs/tween.js';
 let anim = ref();

 onMounted(async () => {
     // our animation
     setTimeout(() => {
         console.log(anim.value.goToAndPlay(150, true));
         anim.value;
    }, 500);


     // r1's rotation
     // --------------------------------------------------
     const ar1 = document.querySelector('.anim.r1');
     const ar2 = document.querySelector('.anim.r2');
     const ar3 = document.querySelector('.anim.r3');
     // const ar4 = document.querySelector('.anim.r4');
     // console.log('🦜: ar1', ar1);
     // rotate the .anim.r1's rotation
     const tween = new Tween({rotation: 0})
         .to({rotation: 360}, 200000)
         .onUpdate((obj) => {
             let r = obj.rotation;
             ar1.style.transform = `rotate(${r}deg)`;
             ar2.style.transform = `rotate(${r}deg)`;
             ar3.style.transform = `rotate(${r}deg)`;
             // ar4.style.transform = `rotate(${r}deg)`;
         })
         .repeat(Infinity)
         .start();


     function update(time) {
         requestAnimationFrame(update);
         tween.update(time);
     }
     requestAnimationFrame(update);

 });
</script>
